<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>报警信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.depicker.css" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<link rel="stylesheet" type="text/css" href="css/equipment.css" />
		<style type="text/css">
			.noData{
				margin-top: 30%;
			}
			.warn_tab{
				position: absolute;
				width: 100%;
				top: 64px;
				left: 0;
				z-index: 100;
			}
			.warn_itemBox{
				padding-top: 40px;
			}
		</style>
	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-slide-in">
			<!-- 菜单容器 -->
			<div id="backdrop" class="mui-off-canvas-backdrop"></div>
			<aside class="mui-off-canvas-right">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="canvasBox">
							<div>报警名称</div>
							<div class="canvasTime">
								<!-- <select class="eqname">
								</select> -->
								<input type="text" name="" class="timeText eqname" value="" />
							</div>
							<div>报警类型</div>
							<div class="eqType canvas_type">
								<span class="item">阈值报警</span>
								<span class="item">硬件报警</span>
							</div>
							<div>开始时间</div>
							<div class="canvasTime">
								<input class="timeText canvasTime_start" readonly type="text" value="" placeholder="" />
							</div>
							<div>结束时间</div>
							<div class="canvasTime">
								<input class="timeText canvasTime_end" readonly type="text" value="" placeholder="" />
							</div>
							<div class="" style="text-align: center;">
								<button type="button" class="mui-btn mui-btn-primary canvasTrue">确定</button>
								<button type="button" class="mui-btn mui-btn-warning canvasWarn">取消</button>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav gradient_normal">
					<div style="height: 20px;"></div>
					<div class="mui-action-back mui-pull-left mui-icon mui-icon-arrowleft"></div>
					<h1 class="mui-title">报警信息</h1>
					<div class="mui-pull-right mui-icon mui-icon-search searchBtn"></div>
				</header>
				<div class="warn_tab">
					<div class="item active">
						<span class="badgeBox" id="day">
							未处理<span class="mui-badge mui-badge-danger" id="warningday">0</span>
						</span>
					</div>
					<div class="item">
						<span class="badgeBox" id="all">
							已处理<span class="mui-badge mui-badge-danger" id="warningall">0</span>
						</span>
					</div>
				</div>
				<!-- 主页面内容容器 -->
				<div class="mui-content mui-scroll-wrapper" style="padding-top: 64px;">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<!-- 报警信息 -->
						<div class="alarmBox">
							<div class="warn_itemBox">
								<div class="warn_item active nohtml">
									<!-- <div class="map_equiment_listItem">
										<div class="eq_img">
											<div class="eq_img_title">
												<span class="eqDe_btn">1#水泵</span>
											</div>
										</div>
										<div class="eq_info">
											<div class="item">
												<span class="title">报警名称：</span>
												<span class="info">阈值报警</span>
											</div>
											<div class="item">
												<span class="title">报警类型：</span>
												<span class="info">硬件报警</span>
											</div>
											<div class="item">
												<span class="title">报警时间：</span>
												<span class="info">20-20-20 10:10:10</span>
											</div>
											<div class="item">
												<span class="title">报警描述：</span>
												<span class="info">1#水泵电流过大</span>
											</div>
										</div>
									</div> -->
								</div>
								<div class="warn_item havehtml">

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>



		<script src="js/mui.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/mui.picker.js" type="text/javascript"></script>
		<script src="js/mui.dtpicker.js" type="text/javascript"></script>
		<script src="js/rem.js"></script>
		<script type="text/javascript">
			
			var _url = "http://112.54.80.235:8038";
			mui.init({		
				beforeback: function() {
					var self = plus.webview.currentWebview();
					var href = self.href;
					//获得列表界面的webview
					var list = plus.webview.getWebviewById(href);

					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					mui.fire(list, 'screen');
					//返回true，继续页面关闭逻辑
					return true;
				}
			});
			mui.plusReady(function() {
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//竖屏
				plus.screen.unlockOrientation();
				plus.screen.lockOrientation("portrait-primary")
				var DeviceName = localStorage.getItem("eqno")
				//绑定数据
				//getinitfun(info.DeviceName);
				getData(DeviceName, "", "", "", 0);
				getData(DeviceName, "", "", "", 1);
				//getDayCount(DeviceName);
				//getCount(DeviceName);
				// var myself = plus.webview.getWebviewById("alarmMessage.html");
				// myself.addEventListener("show", function() {
				// 	console.log("alarmMessage"+DeviceName);
				// 	getData(DeviceName, "", "", "", 0);
				// 	getData(DeviceName, "", "", "", 1);
				// })
				//打开搜索   
				$('.searchBtn').click(function() {
					mui('.mui-off-canvas-wrap').offCanvas('show');
				});
				//搜索--点击取消
				$('.canvasWarn').click(function() {
					$(".warn_tab .item").show();
					$(".warn_itemBox").css("padding-top","40px")
					mui('.mui-off-canvas-wrap').offCanvas('close');
					//清空选中项
					$('.canvasBox input').val("");
					$('.canvasBox .active').removeClass('active');
					$('.canvasBox select').val("1");
				});
				//检索--设备类型选择
				$('.canvas_type').on("tap", ".item", function() {
					$(this).addClass("active").siblings().removeClass("active");
				});
				//检索--安装位置
				$('.canvas_place').on("tap", ".item", function() {
					$(this).addClass("active").siblings().removeClass("active");
				});
				//搜索--开始时间
				$('.canvasTime_start').click(function() {
					var strPicker = new mui.DtPicker({
						type: 'date'
					});
					strPicker.show(function(e) {
						$('.canvasTime_start').val(e)
					})
				});
				//搜索--结束时间
				$('.canvasTime_end').click(function() {
					var timestart = $('.canvasTime_start').val();
					var endPicker = new mui.DtPicker({
						type: 'date',
						beginDate: new Date(timestart),
					});
					endPicker.show(function(e) {
						$('.canvasTime_end').val(e)
					})
				});
				//搜索--确定按钮
				$('.canvasTrue').on("tap", function() {
					var eqname = $('.eqname').val(); //名称
					var canvas_type = $('.canvas_type .active').text(); //类型			
					var canvasTime_start = $('.canvasTime_start').val(); //开始时间
					var canvasTime_end = $('.canvasTime_end').val(); //结束时间
					$(".warn_tab .item").hide();
					$(".warn_itemBox").css("padding-top","0")
					$('.warn_itemBox .warn_item').eq(1).addClass('active').siblings().removeClass('active')
					//绑定数据
					getNewData(eqname, canvas_type, canvasTime_start, canvasTime_end);
					//关闭搜索
					mui('.mui-off-canvas-wrap').offCanvas('close');
				});
				
				// 监听点击遮罩关闭事件
				document.getElementById("backdrop").addEventListener('tap', function() {
					//阻止默认事件  
					event.detail.gesture.preventDefault();
					mui('.mui-off-canvas-wrap').offCanvas('close');
				});
				//列表点击,进入详情页
				// $(".warn_item").on("tap", function() {
				// 	var id = $(this).attr("data-id");
				// 	mui.openWindow({
				// 		url: "alarmDetail.html",
				// 		id: "alarmDetail.html",
				// 		extras: {
				// 			proid: id
				// 		},
				// 		waiting: {
				// 			autoShow: true, //自动显示等待框，默认为true
				// 			title: '正在加载...', //等待对话框上显示的提示内容
				// 		}
				// 	})
				// });
				//tab
				$('.warn_tab .item').click(function() {
					var index = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
					$('.warn_itemBox .warn_item').eq(index).addClass('active').siblings().removeClass('active');
					getData(DeviceName, "", "", "", index);
					// getCount(DeviceName);
				});
			});
			// function getDayCount(devicename){
			// 	$.ajax({
			// 		type:'get',
			// 		url: _url + '/actionapi/Users/GetBaoJingToDayCount',
			// 		data:{
			// 			devicename:devicename
			// 		},
			// 		dataType: 'json',
			// 		success:function(data){
			// 			var datas = data.data.length;
			// 			$("#warningday").text(datas)
						
			// 		}
			// 	});
			// }
			// function getCount(devicename){
			// 	$.ajax({
			// 		type:'get',
			// 		url: _url + '/actionapi/Users/GetBaojingCount',
			// 		data:{
			// 			devicename:devicename
			// 		},
			// 		dataType: 'json',
			// 		success:function(data){
			// 			var datas = data.data;
			// 			$("#warningall").text(datas);						
			// 		}
			// 	});
			// }
			function getData(devicename, type, start, end, groups) {
				console.log(devicename);
				if (groups == 0) {
					$.ajax({
						type: 'get',
						url: _url + '/actionapi/Users/GetToNowBaoJing',
						dataType: 'json',
						data: {
							devicename: devicename,
							now:"now"
							//type: type,
							//start: start,
							//end: end
						},
						success: function(data) {
							var datas = data.data;
							var html = "";
							if (data.Code > 0) {
								var json = JSON.parse(datas)
								$("#warningday").text(json.length)
								for (var i = 0; i < json.length; i++) {
									//if (data[i].Status == "未处理") {
									html += '<div class="map_equiment_listItem"><div class="eq_img">';
									html += '<div class="eq_img_title"><span class="eqDe_btn">' + json[i].DeviceName + '</span></div></div>';
									html += '<div class="eq_info"><div class="item">';
									html += '<span class="title">报警名称：</span><span class="info">' + json[i].W_Title + '</span>';
									html += '</div><div class="item">';
									html += '<span class="title">报警类型：</span><span class="info">' + json[i].W_Type + '</span>';
									html += '</div><div class="item">';
									html += '<span class="title">报警时间：</span><span class="info">' + json[i].W_Time + '</span>';
									html += '</div><div class="item">';
									html += '<span class="title">报警描述：</span><span class="info">' + json[i].W_Content + '</span>';
									html += '</div></div></div>';
									//};

								};
								$('.nohtml').html(html);
							} else {
								html += '<div class="noData">暂无实时数据</div>';
								$('.nohtml').html(html);
							}
							//$('.havehtml').html(htmlHave);
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							plus.nativeUI.alert("GetToDayBaoJing接口有误", function(e) {
								console.log(e.index);
							}, "信息提示", '确定');
						}
					})
				} else {
					$.ajax({
						type: 'get',
						url: _url + '/actionapi/Users/GetToNowBaoJing',
						dataType: 'json',
						data: {
							devicename: devicename,
							now:"0"
							//type: type,
							//start: start,
							//end: end
						},
						success: function(data) {
							var datas = data.data;
							var html = "";
							if (data.Code > 0) {
								var json = JSON.parse(datas)
								$("#warningall").text(json.length)
								for (var i = 0; i < json.length; i++) {
									//console.log("aa"+json[i].Status);
									//if (data[i].Status == "未处理") {
									html += '<div class="map_equiment_listItem"><div class="eq_img">';
									html += '<div class="eq_img_title"><span class="eqDe_btn">' + json[i].DeviceName + '</span></div></div>';
									html += '<div class="eq_info"><div class="item">';
									html += '<span class="title">报警名称：</span><span class="info">' + json[i].W_Title + '</span>';
									html += '</div><div class="item">';
									html += '<span class="title">报警类型：</span><span class="info">' + json[i].W_Type + '</span>';
									html += '</div><div class="item">';
									html += '<span class="title">报警时间：</span><span class="info">' + json[i].W_Time + '</span>';
									html += '</div><div class="item">';
									html += '<span class="title">报警描述：</span><span class="info">' + json[i].W_Content + '</span>';
									html += '</div></div></div>';
									//};

								};

								$('.havehtml').html(html);
							} else {
								html += '<div class="noData">暂无历史数据</div>';
								$('.havehtml').html(html);
							}

						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							plus.nativeUI.alert("GetWarning接口有误", function(e) {
								console.log(e.index);
							}, "信息提示", '确定');
						}
					})
				}
			}
			
			
			//重写getdata方法
			function getNewData(devicename, type, start, end) {
				$.ajax({
					type: 'get',
					url: _url + '/actionapi/Users/GetNewData',
					dataType: 'json',
					data: {
						devicename: devicename,
						type: type,
						start: start,
						end: end
					},
					success: function(data) {
						var datas = data.data;
						var htmll = "";
						if (data.Code > 0 && datas.length!=0) {	
							for (var i = 0; i < datas.length; i++) {
								//if (data[i].Status == "未处理") {
								htmll += '<div class="map_equiment_listItem"><div class="eq_img">';
								htmll += '<div class="eq_img_title"><span class="eqDe_btn">' + datas[i].DeviceName + '</span></div></div>';
								htmll += '<div class="eq_info"><div class="item">';
								htmll += '<span class="title">报警名称：</span><span class="info">' + datas[i].W_Title + '</span>';
								htmll += '</div><div class="item">';
								htmll += '<span class="title">报警类型：</span><span class="info">' + datas[i].W_Type + '</span>';
								htmll += '</div><div class="item">';
								htmll += '<span class="title">报警时间：</span><span class="info">' + datas[i].W_Time + '</span>';
								htmll += '</div><div class="item">';
								htmll += '<span class="title">报警描述：</span><span class="info">' + datas[i].W_Content + '</span>';
								htmll += '</div></div></div>';
								//};
				
							};
							$('.havehtml').html(htmll);
							$("#warningall").text(datas.length)
							//$('#warningall').text(datas.length);
						} else {
							htmll = '<div class="noData">暂无实时数据</div>';
							$('.havehtml').html(htmll);
							$("#warningall").text(datas.length)
						}
						//$('.havehtml').html(htmlHave);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						plus.nativeUI.alert("GetNewData接口有误", function(e) {
							console.log(e.index);
						}, "信息提示", '确定');
					}
				})
				}
				
				//=搜索界面加载事件
				function getinitfun(devicename){
					console.log(devicename);
					$.ajax({
						type:'get',
						url: _url + '/actionapi/Users/GetChildInformation',
						data:{
							devicename:devicename
						},
						dataType: 'json',
						success:function(data){
							var datas = data.data;
							var opt = "";
							if (data.Code > 0) {
								for (var i = 0; i < datas.length; i++) {
									opt += '<option value="'+ datas[i].VarName +'">' + datas[i].VarName + '</option>';
								};
								$('.eqname').html(opt);
								}
						},
						error:function(){
							mui.toast('GetChildInformation接口有误')
						}
					});
			}
		</script>
	</body>

</html>
